<template>
    <div class="productCode-table-wrap">
        <dataColumSetting
            ref="dataColum"
            :columns="columns"
            :allColumns="allColumns"
            w="615px"
            @updColumns="updColumn"
            size="small"
        ></dataColumSetting>
        <download
            ref="download"
            :columns="objColumns"
            :allColumns="allColumns"
            @getDataxlsx="getDataxlsx"
            size="small"
            :title="$t('m.excel.productCodeInfo')"
        ></download>
        <pagination :length="total" :pagination="pagination" @currpage="getData" float="right"></pagination>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            border
            v-loading="loading"
            style="width: 100%"
            :class="{ showImg: objColumns.productImgUrl }"
        >
            <el-table-column
                key="1"
                prop="productImgUrl"
                :label="$t('m.label.images')"
                class-name="img"
                width="105"
                v-if="!objColumns.productImgUrl"
            >
                <template slot-scope="scope">
                    <img
                        :src="scope.row.productImgUrl"
                        width="85"
                        height="85"
                        v-if="scope.row.productImgUrl"
                    />
                </template>
            </el-table-column>
            <el-table-column
                key="2"
                prop="businessUnit"
                :label="$t('m.label.BU')"
                v-if="!objColumns.businessUnit"
                min-width="100"
            ></el-table-column>
            <el-table-column
                key="3"
                prop="productCategory"
                :label="$t('m.label.productCategory')"
                v-if="!objColumns.productCategory"
                min-width="90"
            ></el-table-column>
            <el-table-column
                key="4"
                prop="productModelNumber"
                :label="$t('m.label.productModelNumber')"
                v-if="!objColumns.productModelNumber"
                min-width="100"
            >
                <template slot-scope="scope">
                    <el-link
                        :href="
                            '#/productCenter/productBasicInfo?model=' + scope.row.productModelNumber
                        "
                    >{{ scope.row.productModelNumber }}</el-link>
                </template>
            </el-table-column>
            <el-table-column key="5" prop="asin" :label="$t('m.label.ASIN')" v-if="!objColumns.asin"  min-width="120">
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?asin=' + scope.row.asin">
                        {{
                        scope.row.asin
                        }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column key="6" prop="upc" :label="$t('m.label.UPC')" v-if="!objColumns.upc" min-width="120"></el-table-column>
            <el-table-column key="7" prop="sku" :label="$t('m.label.SKU')" v-if="!objColumns.sku" min-width="120">
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?sku=' + scope.row.sku">
                        {{
                        scope.row.sku
                        }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                key="8"
                prop="fnsku"
                :label="$t('m.label.FNSKU')"
                v-if="!objColumns.fnsku"
                min-width="120"
            ></el-table-column>
            <el-table-column
                key="9"
                prop="productionCosts"
                :label="$t('m.label.productionCosts')"
                min-width="95"
            ></el-table-column>
            <el-table-column
                key="10"
                prop="productLong"
                :label="$t('m.label.Long')"
                v-if="!objColumns.productLong"
            ></el-table-column>
            <el-table-column
                key="11"
                prop="productWidth"
                :label="$t('m.label.Width')"
                v-if="!objColumns.productWidth"
            ></el-table-column>
            <el-table-column
                key="12"
                prop="productHeight"
                :label="$t('m.label.Height')"
                v-if="!objColumns.productHeight"
            ></el-table-column>
            <el-table-column
                key="13"
                prop="productVolume"
                :label="$t('m.label.Volume')"
                v-if="!objColumns.productVolume"
            ></el-table-column>
            <el-table-column
                key="14"
                prop="productGrossweight"
                :label="$t('m.label.Grossweight')"
                v-if="!objColumns.productGrossweight"
            ></el-table-column>
            <el-table-column
                key="15"
                prop="productNetweight"
                :label="$t('m.label.Netweight')"
                v-if="!objColumns.productNetweight"
            ></el-table-column>
            <el-table-column
                key="16"
                prop="productMaterial"
                :label="$t('m.label.Material')"
                v-if="!objColumns.productMaterial"
            ></el-table-column>
            <el-table-column
                key="17"
                prop="productCertification"
                :label="$t('m.label.Certification')"
                v-if="!objColumns.productCertification"
            ></el-table-column>
            <el-table-column
                key="18"
                prop="productPackageContains"
                :label="$t('m.label.PackageContains')"
                v-if="!objColumns.productPackageContains"
                min-width="200"
            ></el-table-column>
            <el-table-column
                key="19"
                prop="productDescriptionChs"
                :label="$t('m.label.descriptionChs')"
                v-if="!objColumns.productDescriptionChs"
                min-width="250"
            >
                <template slot-scope="scope">
                    <span style="font-size: 12px;line-height: 16px;">
                        {{
                        scope.row.productDescriptionChs
                        }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                key="20"
                prop="productDescriptionEn"
                :label="$t('m.label.descriptionEn')"
                v-if="!objColumns.productDescriptionEn"
                 min-width="200"
            >
                <template slot-scope="scope">
                    <span style="font-size: 12px;line-height: 16px;">
                        {{
                        scope.row.productDescriptionEn
                        }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :length="total"
            :pagination="pagination"
            @currpage="getData"
            float="right"
            style="margin: 15px 0;"
        ></pagination>
        <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template>
<script>
import pagination from "components/pagination/pagination.vue";
import download from "components/xlsx/xlsx.vue";
import dataColumSetting from "components/dataColumSetting/dataColumSetting.vue";
import scrollTable from "components/scroll/scroll-table.vue";
const ERR_OK = 200;
export default {
    props: ["formData"],
    data() {
        return {
            tableData: [],
            loading: true,
            objColumns: {},
            columns: [],
            allColumns: [],
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0,
            dataList: []
        };
    },
    created() {
        this.getData();
    },
    mounted() {
        this.allColumns = JSON.parse(JSON.stringify(this.$refs.table.columns));
    },
    methods: {
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        //获取列表
        getData() {
            this.tableData = [];
            this.loading = true;
            this.formData.pageNumber = this.pagination.currpage;
            this.formData.pageSize = this.pagination.pagesize;
            this.$ajax({
                method: "post",
                url: this.GLOBAL.productService + "/searchData/findData",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.tableData = res.data.data.dataList;
                    this.total = res.data.data.total;
                    this.getColumn(JSON.parse(res.data.data.dataColum));
                    this.$refs.scrollTable.scrollShow(this.$refs.table)
                }
                this.loading = false;
            });
        },
        getColumn(val) {
            this.objColumns = {};
            this.columns = val;
            this.allColumns.forEach(ele => {
                if (val.indexOf(ele.property) === -1) {
                    this.objColumns[ele.property] = true;
                }
            });
        },
        //更新数据列
        updColumn(column) {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/userDataColumn/update?coding=" +
                    column.join() +
                    "&userId=" +
                    this.$store.getters.userId
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.getColumn(column);
                    this.getData()
                } else {
                    this.$message.error(res.data.msg);
                }
                this.$refs.dataColum.dataColumhide();
            });
        },
        //下载
        getDataxlsx() {
            let form = JSON.parse(JSON.stringify(this.formData));
            delete form.pageNumber;
            delete form.pageSize;
            this.$ajax({
                method: "post",
                url: this.GLOBAL.productService + "/searchData/findData",
                data: form
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data.dataList);
                } else {
                    this.$refs.download.loadingClose()
                    this.$message.error(res.data.msg);
                }
            });
        }
    },
    watch: {
        formData() {
            this.total = 0;
            this.pagination.currpage = 1;
            this.getData();
        }
    },
    components: {
        download,
        pagination,
        dataColumSetting,
        scrollTable
    }
};
</script>
<style lang="stylus">
.productCode-table-wrap {
    .el-table {
        margin-top: 15px;
    }

    .showImg .img {
        display: none;
    }
}
</style>
<style>
#_magnifier_layer {
    position: fixed !important;
    margin: -200px 0 0 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>


